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ABSTRACT 

Significant numbers of incoming music students at this regional public university are 
determined to have less than adequate preparation in fundamental music theory concepts. 
In the Fall of 1998, a web course called Introduction to Music Theory and Aural Skills 
was published as an interactive and self-contained learning environment to provide a 
partial solution to this problem. 

This presentation will provide an overview of the course design, highlighting aspects of 
HTML and JavaScript which provide interactivity. Recent course revisions have involved 
rewriting the material using Macromedia's Director. Some initial comparisons and 
contrasts between the two authoring environments will be made. 

BACKGROUND 

By means of diagnostic examinations, significant numbers of incoming college freshman 
music students at this regional public university are determined to have less than 
adequate preparatory music theory knowledge. To enroll in and successfully pass 
the first semester of four sequenced levels of music theory courses, a vast majority of 
students first need remedial help in such fundamental concepts as constructing scales, 
labeling intervals, counting simple rhythms, naming key signatures, broadly defining 
the most basic terminology and recognizing common notation symbols. A course called 
Introduction to Music Theory and Aural Skills was designed and implemented on campus 
to meet that need in the Fall of 1991. 

Although the creation of the course "fixed" the problem of remedial skills at the college 
level, students with a weak theoretical background continue to enroll as music majors in 
increasing numbers. In seeking further resolution to the problem, two options became the 
focus of attention when the decision was made to develop an internet version of the 
fundamental music theory course. Create an interactive web course that could be taken 
by: 1) anyone with a computer with no help from an instructor, or 2) anyone who has 
paid the ^ees to be officially enrolled allowing for minimal help from an instructor. 
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Establishing that audience base meant that the course could be completed by: 1) college 
freshmen music majors who are diagnosed as being "border line" in music theory 
preparation; 2) high school students (in a music class that is supervised by a music 
instructor); 3) high school students on their own initiative (to prepare for college level 
diagnostic exams); or 4) anyone with an interest in the fundamentals of music theory. 

INITIAL DESIGN CONSIDERATIONS 

Practical design considerations for an internet music theory fundamentals course involved 
recognizing the need to create musical examples as images, musical examples as sound 
files and an interactive environment as an enhanced learning tool. To create an interesting 
learning interface, certain programming objectives and considerations were established as 
high priority. 

First, reading from the computer screen can be naturally interactive. A user can be asked 
to react to written text by pointing and clicking the mouse. Instructions can be 
highlighted, essential points can be clarified and questions can be answered by 
passing the mouse over text or images. Second, hearing the examples is of paramount 
importance. If the sound bytes are small enough to be downloaded quickly, the computer 
is an adequate tool for providing audio examples. Many software titles, such as 
"SoundEdit" and "Deck", are designed to expedite the creation of audio examples. When 
discussing scales, students are able to experience the difference between major and minor 
by listening to examples of each. When determining the characteristic sound of a 
particular interval, no verbal explanation can replicate the actual sound of that interval. 
Third, the course had to be cross-platform and current (but not "cutting-edge”). Most 
public school systems in our region do not have the funding to maintain technological 
currency, so remaining behind the "state-of-the-art" by one generation seemed a practical 
consideration. Fourth, Internet students must have the same ability to put pencil to paper 
as the students who take the parent in-class course. For that reason, Adobe Acrobat files 
were created and made available for download. Such files include manuscript paper for 
drawing symbols, practice tests which include musical examples and glossary files which 
can be downloaded, printed and studied. 

CREATING INTERACTIVITY 

Interactivity was deemed at the outset of development as being very important. The 
course author and developer is not a programmer and was initially confined to learning to 
writing in HTML code. To create the interactive element, some public domain JavaScript 
was adapted to suit the needs of the course. 

The following basic HTML code is all that is needed to create a web document that prints 
CHAPTER INDEX in the middle of a white page and places four clickable images below 
that. 

<HTML> 

<HEAD> 
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<TITLE>Chapter Index</TCTLE> 

</HEAD> 

<BODY BGCOLOR="#ffffff" ALINK="#000000" VLINK="#595c5e"> 

<P ALIGN=CENTERxB><BR> 

<FONT SIZE="+2">CHAPTER 1NDEX<BR> 

</FONT ></Bx/P> 

<P ALIGN=CENTERxA HREF="../chapterl/chlpagel .htm", window. status='Chapter 

One: Musical Symbols';return true" 

xIMG SRC="pix/ch loff.gif ' BORDER="0" 

NAME="tocl" ALIGN="MIDDLE" WIDTH="151" HEIGHT="22" 

NATURALS IZEFLAG="0" 

ALT=""x/A> <BR> 

<A HREF="../chapter2/ch2pagel.htm",window.status='Chapter Two: Note and Rest 
Values';return true"xIMG 
SRC="pix/ch2off.gif" BORDER="0" 

NAME="toc2" ALIGN="MIDDLE" WIDTH="151" HEIGHT="22" 
NATURALSIZEFLAG="0" 

ALT=""x/A> <BR> 

<A HREF=". ./chapter3/ch3pagel. htm", window. status='Chapter Three: Rhythm'; return 

true"xIMG SRC="pix/ch3off.giP 

BORDER="0" 

NAME="toc3" ALIGN="MIDDLE" WIDTH="151" HEIGHT="22" 

N ATUR ALS IZEFLAG= "0 " 

ALT=""x/AxBR> 

<A HREF="../chapter4/ch4pagel.htm",window.status='Chapter Four: Meter 
Signatures';return tme"xIMG 
SRC="pix/ch4off.gif BORDER="0" 

NAME="toc4" ALIGN="MIDDLE" WIDTH="151" HEIGHT="22" 
NATURALSIZEFLAG="0" 

ALT=""x/AxBR> 

</Px/BODY> 
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To add interactivity to the images, such as "rollovers", JavaScript is necessary. The 
following added code (in bold) allows each of the above images to change as the mouse 
passes over any one of them. 



<HTML> 

<HEAD> 

<TITLE>Chapter Index</nTLE> 
<SCRIPT LANGUAGE="JavaScript"> 



{ toe Ion = new Image(); 
toclon.src = "pix/chlon.gif"; 
toc2on = new Image(); 
toc2on.src = "pix/ch2on.gif; 
toc3on = new Image(); 
toc3on.src = "pix/ch3on.gif 
toc4on = new Image(); 
toc4on.src = "pix/ch4on.gif; 
toe 1 off = new Image(); 
tocloff.src = "pix/ch loff.gif; 
toc2off = new Image(); 
toc2off.src = "pix/ch2off.gif; 
toc3off = new Image(); 
toc3off.src = "pix/ch3off.gif; 
toc4off = new Image(); 
toc4off.src = "pix/ch4off.gif"; 

} 

function img_act(imgName) { 

{ imgOn = eval(imgName + "on.src"); 
document [imgName].src = imgOn; 

} 

} 

function img_inact(imgName) { 

{ imgOff = eval(imgName + "off.src"); 
document [imgName].src = imgOff; 

} 

} 

</SCRIPT> 

</HEAD> 

<BODY BGCOLOR="#ffffff 1 ALINK="#000000" VLINK="#595c5e"> 

<P ALIGN=CENTERxB><BR> 

<FONT SIZE="+2">CHAPTER INDEX<BR> 

</F ONTx/B ></P> 

<P ALIGN =CENTER>< A HREF="../chapterl/chlpagel.htm" 
onMouseover="img_act('toc 1'), window. status='Chapter 
One: Musical Symbols';retum true" onMouseout="img_inact('tocl')"xIMG 
SRC="pix/ch loff.gif BORDER="0" 

NAME="tocl" ALIGN="MIDDLE" WIDTH="151" HEIGHT="22" 

NATURALS IZEFLAG="0" ALT='"'x/A> <BR> 

<A HREF="../chapter2/ch2pagel.htm" 

onMouseover="img_act('toc2'), window. status='Chapter Two: Note and Rest 
Values' ;return true" onMouseout="img_inact('toc2')"xIMG SRC="pix/ch2off.gif" 
BORDER="0" NAME="toc2" 
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ALIGN= "MDDDLE" WIDTH*" 151" HEIGHT=”22" 

NATURALSIZEFLAG=”0" ALT=""x/A> <BR> 

<A HREF=''. . /chapter 3/ch3page 1 .htm" 

onMouseover="img_act('toc3'),window.status='Chapter Three: Rhythm' ;return 
true" onMouseout="img_inact('toc3')"><IMG SRC="pix/ch3off.gif BORDER="0" 
NAME=”toc3" ALIGN="MIDDLE" 

WIDTH="151" HEIGHT="22" NATURALS IZEFLAG="0" ALT='”'></A><BR> 

<A HREF="../chapter4/ch4pagel.htm" 

onMouseover="img_act('toc4'), window. status='Chapter Four: Meter 
Signatures';return true" onMouseout="img_inact('toc4')"><IMG SRC="pix/ch4off.gif" 
BORDER="0" NAME="toc4" 

ALIGN="MIDDLE'' WIDTH="151" HEIGHT="22" NATURALS IZEFLAG="0" 
ALT=""x/AxBR> 

</P> 

</BODY> 

Part of the code (window. status='Chapter Three: Rhythm';return true) also allows for an 
additional message in the STATUS BAR at the bottom of the window. This is a device 
particularly useful in revealing answers to questions which may be posed in the main 
body of the document. 

The code which creates the JavaScript rollover was the primary source code for creating 
most of the interactivity required for this course. Rollover images may be used for 
revealing answers, animating examples and manipulating images as the user passes 
the mouse over a picture or clicks on a designated spot within an image map. The code 
was copied and pasted into documents, and edited, as the instructional needs arose during 
the design stages of course development. 

COURSE CONTENT 

Course content is very similar to the on-campus version of the course. It also follows the 
same content outline as many programmed textbooks and could be used to supplement 
most of them. The chapters include: 

Chapter One: Musical Symbols 
Chapter Two: Note and Rest Values 
Chapter Three: Rhythm 
Chapter Four: Meter Signatures 
Chapter Five: Intervals 
Chapter Six: Modes 
Chapter Seven: Major Scales 
Chapter Eight: Minor Scales 
Chapter Nine: Key Signatures 
Chapter Ten: Triads 




6 



Near the end of most chapters there are several introductory eartraining exercises. Some 
of the exercises include intervallic, 

melodic and rhythmic identification. Most melodic and rhythmic exercises are very brief 
excerpts, allowing for relatively fast downloads. For those enrolled in the course, cues to 
request tests are provided periodically throughout the course. At appropriate times, four 
major exams are emailed to students. Instructions are given to download the Adobe 
Acrobat file (in PDF format), print it out, fill it out and FAX it back to the instructor 
within 24 hours. A final exam may be taken anytime during the university's final 
examination week. 

ADMINISTRATION ISSUES 

Users may access the course without any restrictions or they may formally enroll to take 
the course for college credit through this university. Only enrolled students are able to 
email requests for tests at appropriate times and to ask for help from the instructor. 

The involvement of the instructor in the course administration is quite minimal. The 
university registrar completes the enrollment process and handles all fees and records, the 
Office of Continuing Education promotes the course and disperses information regarding 
enrollment procedures and course requirements, and the Department of Music handles 
referrals and answers departmental questions. The maximum enrollment for the course is 
officially set at one student so that all students above that number must seek special 
approval to register for the course. An unofficial enrollment cap has been set at 10 
students. The initial contact with the instructor is usually nothing more than an email 
request to get started on the course. 

Since the implementation of Introduction to Music Theory and Aural Skills (the web 
version) in the Fall semester of 1998, approximately 35 students have received credit by 
taking the course. One student received a failing grade while all others received a letter 
grade of "C" or better. 

SOME FINAL PROGRAMMING OBSERVATIONS 

A new edition of the course is currently underway and involves reprogramming the 
content using Macromedia's Director. The principal objective in the revision is cosmetic: 
to make the material more appealing and presentable. The first two chapters have been 
completed and some initial observations can be made, comparing and contrasting the two 
developmental methods. 

1. Using software, such as Director, to create an interactive learning environment seems 
to save no time when comparing that development method to writing in JavaScript- 
enhanced HTML code. For the inexperienced programmer, both writing methods will 
require a research period, whether to learn how to use the software being employed or to 
learn the language of HTML (and how to adapt JavaScript). The two examples shown 
below represent a means of navigating from page to page. The first is programmed in 
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HTML and the second in Director. While the objective of each is the same, the manner 
by which each is programmed is very different. 

HTML Page Links 



DIRECTOR Page Links 



2. Java is a programming language that is nearly universally understood by newer 
browsers. Downloaded documents created with Director will not be understood by a 
browser unless the appropriate helper software (available for free) has been installed. 

3. Each chapter has between 15 and 25 pages of content. Each page written in HTML is a 
separate document and is loaded individually to the local computer for use and each takes 
only a few seconds to load. Using Director, the entire chapter is written as a user- 
controllable document and each chapter requires a substantially longer loading time. 
However, after the entire chapter has been downloaded to the computer, each page is 
nearly immediately accessible. 

4. Using HTML, certain special effects require more extensive programming skills than 
this author has acquired. Many of those same effects are readily available using Director. 
Some of those effects include animating images and dissolving and wiping between 
pages and graphics. Of particular note, clicking on an image to activate an audio file was 
a programming problem with JavaScript. Using Director, the image was imported as a 
cast member, given a behavior (on mouseDown) and the task was no problem. 

5. Since graphics are treated as sprites in Director, images, unusual fonts, backgrounds 
and banners are not a problem to incorporate onto a page. Controlling such elements, 
using motion, color changes and fades is quite easy. Using HTML to program content, 
control over those individual elements is difficult to impossible without the aid of Java. 

6. Finally, an observation about security can be issued. An HTML document contains 
code that, without encryption, can be viewed by anyone. If a student wants to find an 
answer to a question that is posed (on a practice test, for example), s/he can, with most 
browsers, view the document source. Documents created with Director may be saved as 
Director files which, in turn, may be referenced by HTML documents. The student (or 
user) is not immediately accessing the Director document - only a reference to it. That 
means the code is not immediately accessible and a greater degree of security is achieved. 

CONTACT 



The course 



Introduction to Music Theory and Aural Skills (the complete HTML course) 

http://www.murraystate.edu/qacd/cfac/music/MUS109entry.htm 

Introduction to Music Theory and Aural Skills (Chapter One: Musical Symbols, the 

Director version) 

http://www.murraystate.edu/qacd/cfac/music/musl09e/chapterl/chapterl.html 
The author 

Dr. John Steffa, Associate Professor 

Department of Music 

304 Fine Arts Center 

Murray State University 

Murray, Kentucky 4207 1 

Office: 502.762.3142 

FAX: 502.762.6335 

Email : john . steffa @ murraystate . edu 

http://www.murraystate.edu/qacd/cfac/music/jsteffa.htm 
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